<template>
	<div>
		<div style="height:40px;padding:5px">
			<el-input
				ref="kw"
				placeholder="请输入搜索内容,按回车搜索"
				@keyup.enter.native="listProduction"
				v-model="keyword"
				class="input-with-select"
			>
				<el-button
					slot="append"
					icon="el-icon-search"
					@click="listProduction"
				></el-button>
			</el-input>
		</div>
		<div>
			<hr
				style="border:1 dashed "
				width="100%"
				color="#DCDFE6"
				size="1"
			/>
		</div>
		<div>
			<ag-grid-vue
				ref="grid"
				:columnDefs="columnDefs"
				:rowData="rowData"
				style="height: 500px"
				:gridOptions="gridOpt"
				:pagination="false"
				:getRowNodeId="function(params){return params.AutoId}"
				:row-selection="multiplestr"
				class="ag-theme-material"
				@grid-ready="onGridReady"
				@firstDataRendered="setDefaultSelection"
				@rowDoubleClicked="onConfirm"
			></ag-grid-vue>
		</div>
		<div>
			<hr
				style="border:1 dashed "
				width="100%"
				color="#DCDFE6"
				size="1"
			/>
		</div>
		<div>
			<el-button-group>
				<el-button
					size="mini"
					type="primary"
					@click="onFinish"
				>完成</el-button>
				<el-button
					size="mini"
					@click="onConfirm"
				>添加</el-button>
				<el-button
					size="mini"
					@click="onIgnore"
				>关闭</el-button>
			</el-button-group>
		</div>
	</div>
</template>

<script>
	import { AgGridVue } from 'ag-grid-vue'
	import { listProduction } from '@/api/production.js'

	export default {
		components: {
			AgGridVue
		},
		data() {
			return {
				columnDefs: [
					{ headerName: '', field: 'chk', width: 50, checkboxSelection: true },
					{
						headerName: '品号',
						field: 'Code',
						resizable: true,
						sortable: true,
						filter: true
					},
					{
						headerName: '旧编码',
						field: 'OldNumber',
						sortable: true,
						resizable: true,
						filter: true
					},
					{
						headerName: '品名',
						field: 'Name',
						resizable: true,
						sortable: true,
						filter: true
					},

          {
            headerName: '销售级别',
            field: 'SaleLv',
            sortable: true,
            resizable: true,
            filter: true
          },
					{
						headerName: '简码',
						field: 'ShortCode',
						sortable: true,
						resizable: true,
						filter: true
					},
					{
						headerName: '规格',
						field: 'Specification',
						sortable: true,
						resizable: true,
						filter: true
          },
					{
						headerName: '物料分组',
						field: 'GroupName',
						sortable: true,
						resizable: true,
						filter: true
          }
				],
				rowData: [],
				gridApi: null,
				columnApi: null,
				keyword: '',
				multiplestr: '',
				gridOpt: null
			}
		},
		props: ['multiple', 'autoset', 'init', 'conditions'], //autoSet是默认带出候选列表，init是开窗后勾选的值的数组，conditions是默认条件
		methods: {
			onGridReady(params) {
				this.gridApi = params.api
				this.columnApi = params.columnApi
			},
			autoSizeCloumns() {
				var allColumnIds = []
				this.columnApi.getAllColumns().forEach(function(column) {
					allColumnIds.push(column.colId)
				})
				this.columnApi.autoSizeColumns(allColumnIds)
				this.$nextTick(() => {
					this.columnApi.autoSizeColumns(allColumnIds)
				})
			},
			setDefaultSelection() {
				if (this.init && this.init.length > 0) {
					for (let idx in this.init) {
						this.gridApi.forEachNode(node => {
							if (node.data.AutoId === this.init[idx]) {
								node.setSelected(true)
							}
						})
					}
				}
			},
			listProduction() {
				const l_condition = !this.conditions
					? []
					: JSON.parse(JSON.stringify(this.conditions))
				l_condition.push({
					Key: 'Name|ShortCode|Code|OldNumber',
					Op: 'like',
					Value: '%' + this.keyword + '%'
				})
				listProduction(0, 1000, l_condition)
					.then(response => {
						this.rowData = response.Data
						this.autoSizeCloumns()
					})
					.catch(error => {
						console.log(error)
						this.rowData = []
					})
			},
			onFinish() {
				const selectedNodes = this.gridApi.getSelectedNodes()
				const selectedData = selectedNodes.map(node => node.data)
				if (selectedData.length === 0) {
					this.$message('请先选中行')
					return
				}
				this.gridApi.deselectAll()
				this.$emit('finish', selectedData)
			},
			onIgnore() {
				this.gridApi.deselectAll()
				this.$emit('ignore')
			},
			onConfirm() {
				const selectedNodes = this.gridApi.getSelectedNodes()
				const selectedData = selectedNodes.map(node => node.data)
				if (selectedData.length === 0) {
					this.$message('请先选中行')
					return
				}
				this.gridApi.deselectAll()
        this.$emit('confirm', selectedData)
        console.log(selectedData)
			},
			focus() {
				this.$refs.kw.focus()
			}
		},
		mounted() {
			if (this.autoset) {
				this.listProduction()
			}
			this.focus()
		},
		beforeMount() {
			this.gridOpt = {}
			if (this.multiple) {
				this.multiplestr = 'multiple'
			} else {
				this.multiplestr = 'single'
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css";
	@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
	@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-material.css";
</style>

